<!--
 * @Author: Dee Dee
 * @Date: 2023-08-09 09:48:48
 * @LastEditors: Dee Dee
 * @LastEditTime: 2023-08-22 15:44:27
 * @FilePath: /培训认证系统20230810/src/views/vadmin/home/admin.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="app-container home-page">
        <!-- part1 -->
        <el-row :gutter="20" class="stats-row">
            <!-- 我的考试 -->
            <el-col :xs="24" :sm="24" :md="8" class="stats-col">
                <Exam :form="form.paper" />
            </el-col>
            <!-- 我的课程 -->
            <el-col :xs="24" :sm="24" :md="8" class="stats-col">
                <Course :form="form.train"/>
            </el-col>
            <!-- 我的认证 -->
            <el-col :xs="24" :sm="24" :md="8" class="stats-col">
                <Certificate :form="form.certificate"/>
            </el-col>
        </el-row>
        <!-- part2 -->
        <el-row :gutter="20" class="content-row">
            <el-col :xs="24" :sm="24" :md="16" class="content-col">
                <Left/>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" class="content-col">
                <Right/>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import Right from "@/views/vadmin/home/components/partTwo/right";
import Left from "@/views/vadmin/home/components/partTwo/left";
import Certificate from "@/views/vadmin/home/components/partOne/certificate";
import Course from "@/views/vadmin/home/components/partOne/course";
import Exam from "@/views/vadmin/home/components/partOne/exam";
import { getStatistics } from '@/api/vadmin/home/index';
import { isMobileViewport } from '@/utils/device';

export default {
    components: { Right, Left, Course, Exam, Certificate },
    computed: {
        ...mapState(["settings", "admin", "id"]),
        variables() {
            return variables;
        },
        theme() {
            return this.$store.state.settings.theme;
        },
        admin() {
            return this.$store.state.user.admin;
        },
        is_superuser() {
            return this.$store.state.user.is_superuser;
        },
        id() {
            return this.$store.state.user.id;
        },
        isMobile() {
            // 使用设备检测工具判断是否是移动端
            return isMobileViewport();
        }
    },
    data(){
        return{
         form:{
            train: {
                Passed: 0,
                Failed: 0
    },
    paper: {
                Passed: 0,
                Failed: 0
    },
    certificate: {
                count: 0
    }
         },
         loading: false   
        }
    },
    created(){
        this.getList();
    },
    methods:{
        getList() {
            this.loading = true;
            getStatistics().then(res => {
                // 确保返回的数据结构完整
                if (res) {
                    // 处理train数据
                    if (!res.train) {
                        res.train = { Passed: 0, Failed: 0 };
                    } else {
                        res.train.Passed = res.train.Passed || 0;
                        res.train.Failed = res.train.Failed || 0;
                    }
                    
                    // 处理paper数据
                    if (!res.paper) {
                        res.paper = { Passed: 0, Failed: 0 };
                    } else {
                        res.paper.Passed = res.paper.Passed || 0;
                        res.paper.Failed = res.paper.Failed || 0;
                    }
                    
                    // 处理certificate数据
                    if (!res.certificate) {
                        res.certificate = { count: 0 };
                    } else {
                        res.certificate.count = res.certificate.count || 0;
                    }
                    
                this.form = res;
                }
                this.loading = false;
            }).catch(error => {
                console.error('获取统计数据失败:', error);
                this.loading = false;
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.part1_title {
    font-size: 20px;
    font-weight: bold;
}

.home-page {
    // 统一的内边距
    padding: 15px;
}

.stats-row {
    margin-bottom: 20px;
}

.content-row {
    margin-top: 20px;
}

// 移动端适配样式
@media screen and (max-width: 768px) {
    .home-page {
        padding: 10px;
    }
    
    .stats-col {
        margin-bottom: 15px;
    }
    
    .content-col {
        margin-bottom: 15px;
    }
    
    // 优化卡片在移动端的显示
    :deep(.el-card) {
        border-radius: 8px;
        margin-bottom: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        
        .el-card__header {
            padding: 12px 15px;
        }
        
        .el-card__body {
            padding: 15px;
        }
    }
    
    // 优化统计数字在移动端的显示
    :deep(.el-statistic) {
        text-align: center;
        
        .el-statistic__number {
            font-size: 18px;
            font-weight: bold;
            color: #1890ff;
        }
        
        .el-statistic__title {
            font-size: 12px;
            margin-top: 5px;
        }
    }
    
    // 优化表格在移动端的显示
    :deep(.el-table) {
        font-size: 13px;
        
        .el-table__row {
            td {
                padding: 8px 0;
            }
        }
    }
    
    // 优化滚动板在移动端的显示
    :deep(.dv-scroll-board) {
        height: 180px !important;
        font-size: 13px !important;
    }
}
</style>